<template>
  <div class="MedicalHistoryView">
    <!-- 病历本 -->
    <van-nav-bar title="病历本"
                 right-text="记录就诊"
                 @click-right="$router.push('/recordvisit')"/>
    <!-- 患者信息显示 -->
    <div class="myInformation">
      <div>
        <div class="msg-row1">
          <van-image
              round
              width="3rem"
              height="3rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
          <div class="msg-row1-1">
            <span>{{ patinetMessage.name ? patinetMessage.name : '倒霉熊' }}</span>
            <span>癫痫一期患者</span></div>
        </div>
        <p class="msg-row2"><span>性别:{{ patinetMessage.sex }}</span><span>年龄:{{
            patinetMessage.age
          }}</span></p>
        <p>城市:{{ patinetMessage.address }}</p>
        <p>确诊医院:{{ patinetMessage.hospital }}</p>
        <p>确诊时间:{{ patinetMessage.diagnosis|formatDate }}</p>
      </div>
      <div class="btn">
<!--        <p>信息已完善</p>-->
        <p @click="$router.push('/completecase')">查看完整病历</p></div>
    </div>
    <!-- 折线图 -->
    <div class="Linechart">
      <div class="title">
        <span>发作频次</span>
<!--        <span>查看完整频次</span>-->
      </div>
      <div ref="main" class="box"></div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {formatDate} from "@/utils/date";

export default {
  name: "MedicalHistoryView",
  data() {
    return {
      patinetMessage: '',//患者信息
    };
  },
  computed: {
    ...mapGetters(['userPhone'])
  },
  mounted() {
    this.drawing();
    this.getPatinetMessage();
  },
  methods: {
    //根据手机号查询患者信息
    getPatinetMessage() {
      this.$service.medicalHistoryService.getPatinetMessage(this.userPhone).then(res => {
        console.log('患者信息=' + res.data);
        this.patinetMessage = res.data.data;
      })
    },
    drawing() {
      let myChart = this.$echarts.init(this.$refs.main);
      //折线图
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["11-07", "11-08", "11-09", "11-10", "11-11", "11-12", "11-13"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "发作次数",
            type: "line",
            stack: "Total",
            data: [1, 3, 1, 0, 4, 6, 3],
          },
        ],
      });
    },
  },
  filters: {
    //时间戳转换为日期格式
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
};
</script>

<style scoped lang="less">
.MedicalHistoryView {
  //个人基本信息
  .myInformation {
    background-color: white;

    display: flex;
    font-size: 14px;
    padding: 0.5rem;
    justify-content: space-between;

    .msg-row1 {
      display: flex;

      .msg-row1-1 {
        display: flex;
        flex-direction: column;
        margin-left: 1rem;
        justify-content: center;
      }
    }

    .msg-row2 {
      span {
        margin-right: 0.5rem;
      }
    }

    .btn {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #1989fa;
    }
  }

  //折线图


  .box {
    width: 100%;
    height: 250px;
  }

  .Linechart {
    width: 100%;
    height: 250px;

    .title {
      display: flex;
      justify-content: space-between;
      margin: 0.5rem;

      span:nth-of-type(2) {
        color: #1989fa;
        font-size: 14px;
      }
    }

  }
}


</style>
